<template>
	<view class="car-pft-detail">
		<view class="main">
			<view class="progress-box">
				<ProgressBar :currentStep="2" />
			</view>
			
			<CustomInfo ref="custInfo" :data="customInfoData" :type="type" />
		</view>
		
		<view class="tab-container">
			<u-tabs 
				:list="tabList" 
				bg-color="transparent"
				:is-scroll="false" 
				:current="currentTab" 
				@change="val=>{currentTab = val}"
			></u-tabs>
			
			<!-- 接车问诊 -->
			<ReciveCar ref="reciveCar" v-show="currentTab === 0" />
			<!-- 环车检查 -->
			<EncircleCheck ref="encircleCheck" v-show="currentTab === 1" />
			
			<!-- 客户确认 -->
			<view class="custom-confirm" v-show="currentTab === 2">
				<view class="electric-info">
					<text class="title">电量信息</text>
					<view class="progress-bar">
						<text>当前电量：</text>
						<view
							id="batteryInfor"
							@tap="onProgressChange($event, 'batteryInfor')"
							@touchmove="onProgressChange($event, 'batteryInfor')"
							class="progress-content"
						>
							<view :style="{width: batteryInfor + '%'}" class="active-bar"></view>
						</view>
						<view class="percent">{{batteryInfor}}%</view>
					</view>
					<view class="progress-bar">
						<text>当前油量：</text>
						<view 
							id="oilInfor"
							@tap="onProgressChange($event, 'oilInfor')"
							@touchmove="onProgressChange($event, 'oilInfor')"
							class="progress-content"
						>
							<view :style="{width: oilInfor + '%'}" class="active-bar"></view>
						</view>
						<view class="percent">{{oilInfor}}%</view>
					</view>
				</view>
				
				<view class="item">
					<text class="title">当前行驶里程</text>
					<view @click="openModal('mileage')" class="mileage">
						<text>{{mileage || 0}}</text>
						<text class="unit">km</text>
					</view>
				</view>
				
				<view class="remark item">
					<text class="label">备注</text>
					<input type="text" v-moodel="remark" />
				</view>
				
				<view class="sign">
					<view class="sign-box">
						<text class="label">服务顾问签名</text>
						<view 
							class="sign-img"
							@click="toSignPage('servicer')"
							:style="signBoxBgImg"
						>
							<image v-if="servicerSign" class="img" :src="servicerSign"></image>
						</view>
					</view>
					<view class="sign-box">
						<text class="label">客户签名</text>
						<view 
							@click="toSignPage('customer')"
							class="sign-img"
							:style="signBoxBgImg"
						>
							<image v-if="customerSign" class="img" :src="customerSign"></image>
						</view>
					</view>
				</view>
				
				<view class="btn-groups">
					<u-button type="primary" @click="submit('save')">保存</u-button>
					<u-button type="default" @click="submit('toOrder')">转工单</u-button>
				</view>
			</view>
		</view>
		
		<!-- 弹出层-编辑行驶里程 -->
		<u-popup 
			@close="onModalClose"
			v-model="showEdit"
			mode="bottom"
			height="400rpx"
			closeable
		>
			<view class="edit-modal">
				<u-input maxlength="100" 
					class="input" 
					placeholder="请输入行驶里程" 
					v-model="editValue" 
					type="number" 
					:border="true" 
				/>
				<u-button class="btn" @click="editConfirm" type="primary">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>
	
<script>
	import pointImg from './components/pointImg/index.vue';
	import SelectBox from './components/checkbox.vue';
	import CustomInfo from './components/customInfo.vue';
	import ProgressBar from '../bookingManagement/components/progressBar/index.vue';
	import ReciveCar from './components/tabContent/reciveCar.vue';
	import EncircleCheck from './components/tabContent/encircleCheck.vue';
	import Electric from './components/electric.vue';
	import { savePreCheck,queryPreCheckInfo,preInspectionToWorkshop } from '@/api/carPreFlight.js'
	 
	export default {
		components:{
			pointImg,
			SelectBox,
			CustomInfo,
			ProgressBar,
			ReciveCar,
			EncircleCheck,
			Electric
		},		
		data() {
			return {
				type: '',
				currentTab: 0,
				customInfoData: {},
				tabList: [
					{ name: '接车问诊' },
					{ name: '环车检查' },
					{ name: '客户确认' }
				],
				modalType: '',
				routeParms:null,
				showEdit: false,
				editValue: '',
				batteryInfor: 0,
				oilInfor: 0,
				mileage: '',
				servicerSign: '', //服务顾问签名
				customerSign: '', //客户签名
				remark: '', //备注
				params:null,
				listType:null
			}
		},
		computed: {
			signBoxBgImg() {
				return `background-image: url("${this.$imgBaseUrl}images/u2264.png")`;
			},
			formType(){
				return this.$store.state.carPreFlight.formType
			}
		},
		async onLoad(option) {
			console.log('option',option)			
			const params = {
				checkId:option.checkId
			}
			if(this.formType !== 'add'){
				let res = await queryPreCheckInfo(params)	
				if(!res.rows.confirmVO.oilInfor){
					res.rows.confirmVO.oilInfor = 0 
				}
				for (const key in res.rows.confirmVO){					
					this[key] = res.rows.confirmVO[key]
				}
				console.log('this',this)
				this.$store.commit('formDetail',res.rows)
			}
		},		
		methods: {			
			toSignPage(type) {
				if(this.$store.getters.isEdit) return
				const url = `/pages/autograph/index?type=${type}`;
				this.$navTo.togo(url)
			},
			getimgUrl(e,type){
				const that = this 
				console.log('getback',e,type)
				uni.getFileSystemManager().readFile({
					filePath: e[type],
					encoding: 'base64',
					success: r => { // r.data }
						console.log('base64',r)
						that[type] = 'data:image/jpg;base64,' + r.data
					}
				})
				// this[type] = e[type]
			},
			// 提交
			submit(type) {
				const { reciveCar,encircleCheck ,custInfo } = this.$refs;
				// 接车问诊
				const inquiryVO = reciveCar.getCurrentData();
				// 还车检查
				const pictureVOS = encircleCheck.getPointArr()
				// 客户确认
				const confirmVO = {
					batteryInfor: this.batteryInfor,
					oilInfor: this.oilInfor,
					servicerSign: this.servicerSign,
					customerSign: this.customerSign,
					remark: this.remark,
					mileage: this.mileage
				}		
				const baseVO = custInfo.custInfo
				this.params = {
					inquiryVO:inquiryVO,
					confirmVO:confirmVO,
					pictureVOS:pictureVOS,
					baseVO:baseVO
				}
				console.log('inquiryVO',inquiryVO)
				// console.log('pictureVOS',pictureVOS)
				// console.log('confirmVO',confirmVO)
				this[type]();	
			},
			// 保存
			async save() {
				console.log('保存')
				const that = this 
				let res = await savePreCheck(this.params)	
				if(res.result === '1'){
					uni.showToast({
						title:'保存成功',
						icon:'none'
					})
					this.$store.commit('formDetail',that.params)
					uni.navigateBack()
				} else {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			// 转工单
			async toOrder() {
				console.log('转工单')
				if(!this.$store.state.carPreFlight.formDetail.baseVO.checkId){
					uni.showToast({
						title:'请先保存数据',
						icon:'none'
					})
					return 
				}
				const params ={
					checkId:this.$store.state.carPreFlight.formDetail.baseVO.checkId,
					carLicense:this.$store.state.carPreFlight.formDetail.baseVO.carLicense
				}
				let res = await preInspectionToWorkshop(params)
				console.log('details',res)
				if(res.result === '1'){
					uni.showToast({
						title:'转工单成功',
						icon:'none'
					})
					uni.navigateBack()
				} else {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			// 进度条
			onProgressChange(e, id) {
				if(this.$store.getters.isEdit) return
				const query = wx.createSelectorQuery();
				query.select('#' + id).boundingClientRect();
				query.exec(res => {
					const { offsetLeft } = e.target;
					const { clientX } = e.touches[0];
					
					let ratio = (clientX - offsetLeft) / res[0].width * 100;
					if(ratio <= 0) ratio = 0;
					if(ratio >= 100) ratio = 100;
					this[id] = Number(ratio.toFixed(0));
				})
			},
			// 打开弹出层
			openModal(type) {
				if(this.$store.getters.isEdit) return
				this.modalType = type;
				this.showEdit = true;
			},
			
			// 弹出层-点击确认
			editConfirm() {
				const field = this.modalType;
				this[field] = this.editValue;
				this.showEdit = false;
			},
			// 弹出层关闭
			onModalClose() {
				console.log('弹框关闭')
			}
		}
	}
</script>

<style scoped lang="scss">
	.car-pft-detail{
		padding-bottom: 88rpx;
	}
	.header {
		position: fixed;
		left: 0;
		top: 0;
		box-sizing: content-box;
		width: 100%;
		height: 88rpx;
		background: #4F75BE;
		color: #fff;
		font-size: 32rpx;
		
		.header-inner {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 88rpx;
		}
		.left-icons {
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			height: 88rpx;
		}
		u-icon {
			margin-left: 30rpx;
		}
	}
	.main{
		padding: 0 30rpx;
		
		.progress-box{
			margin: 20rpx 0;
			background: #fff;
			border-radius: 10rpx;
		}
	}
	.custom-confirm{
		margin-top: 10rpx;
		padding: 30rpx 0;
		background: #fff;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}
	.title{
		font-size: 32rpx;
		color: #333;
	}
	.label{
		font-size: 28rpx;
		color: #999;
	}
	.electric-info{
		margin-bottom: 30rpx;
		padding:  0 20rpx 0 30rpx;
		
		.title{
			margin-bottom: 20rpx;
		}
	}
	.progress-bar{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
		
		.progress-content{
			flex: 1;
			height: 20rpx;
			border-radius: 15rpx;
			background: #e5e5e5;
			overflow: hidden;
		}
		.active-bar{
			height: 100%;
			background-color: #4F75BE;
		}
		.percent{
			width: 100rpx;
			margin-left: 30rpx;
			color: #4F75BE;
			font-size: 32rpx;
			font-weight: 500;
		}
	}
	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #f1f1f1;
		font-size: 28rpx;
		
		.mileage {
			color: #4F75BE;
			font-size: 36rpx;
			
			.unit {
				font-size: 28rpx;
				color: #333;
			}
		}
	}
	.item.remark {
		justify-content: unset;
		input {
			flex: 1;
			height: 100%;
			margin-left: 20rpx;
		}
	}
	.sign{
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		
		.sign-box {
			display: flex;
			flex-direction: column;
			width: 340rpx;
		}
		
		.sign-img{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 320rpx;
			height: 320rpx;
			margin-top: 20rpx;
			border-radius: 10rpx;
			overflow: hidden;
			
			.img{
				width: 300rpx;
				height: 300rpx;
			}
		}
	}
	.edit-modal{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 0 60rpx;
		
		.input{
			width: 100%;
		}
		
		.btn{
			width: 100%;
			margin-top: 50rpx;
		}
	}
	.btn-groups{
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;
		padding: 0 30rpx;
		
		u-button{
			width: 330rpx;
		}
	}
</style>
